<template>
  <div>
    <el-card>
      <el-table :data="bookForm" border style="width: 100%" stripe>
        <el-table-column prop="_id" label="书籍ID" width="240">
          <template slot-scope="scope">
            <h4 @click="toBook(scope.row._id)">{{scope.row._id}}</h4>   
          </template>
        </el-table-column>
        <el-table-column prop="bookname" label="书名" width="180">
        </el-table-column>
        <el-table-column prop="writerid" label="作者" width="240">
          <template slot-scope="scope">
            <h4 @click="toWriter(scope.row.writerid)">{{scope.row.writerid}}</h4> 
            <span>{{scope.row.writername}}</span>  
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="分类" width="180">
        </el-table-column>
        <el-table-column prop="state" label="状态" width="220">
          <template slot-scope="scope">
            <el-button type="danger" plain v-if="scope.row.state == '2'"
            @click="isTrue(scope.row._id)">审核中,点击通过</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="date" label="创建时间" width="220"></el-table-column>
        <el-table-column label="操作"> 
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-message" size="medium">发送信息</el-button>
            </template>
        </el-table-column>
      </el-table>
 <!-- 分页 -->
    <div class="block">
    <span class="demonstration">共有{{isLength}}条记录</span>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      layout="prev, pager, next, jumper"
      :page-size="10"
      :total="isLength">
    </el-pagination>
  </div>
    </el-card>
    
  </div>
</template>
<script>
export default {
  created() {
    this.getBookList();
  },
  data() {
    return {
      bookForm: [],
      isLength:0,
      currentPage: 1,
      pageSize:10,
      
    };
  },
  methods: {
    async getBookList() {
      const { data: res } = await this.$http.post("/books/shenheBook",{pageSize:this.pageSize,currentPage:this.currentPage});
      //console.log(res);
      this.bookForm = res.data;
      this.isLength = res.num;
    },
    async isTrue(id){
        let state = 0;
        const {data:res} = await this.$http.post(`/books/updateState/${id}`,{state})
        if(res.status != 200) return this.$message.error("error")
        this.$message.success("success");
         this.getBookList();
    },
    toBook(id){
      let routeUrl = this.$router.resolve(`/tobook/${id}`);
      window.open(routeUrl.href, "_blank");
    },
    toWriter(id){
      let routeUrl = this.$router.resolve(`/toWriter/${id}`);
      window.open(routeUrl.href, "_blank");
    },
    handleCurrentChange(val){
        this.currentPage = val;
        this.getBookList();
    }
  }
};
</script>
<style lang="less" scoped>
h4:hover{
  color: blue;
  cursor:pointer
}
</style>
